<template>
  <div class="jianDingPost-page">
    <Menus title="鉴定机构查询" :home="true" />

    <div class="detail">
      <h1 class="name">
        {{ jdoffice.name }}
      </h1>
      <div class="contact">
        {{ jdoffice.address }}<br> 电话：{{ jdoffice.tell }}
      </div>
      <div class="intro">
        <div class="ht"><img src="static/img/icon/jianding/circle.png"> 机构简介</div>
        <div class="content">
          <p>{{ jdoffice.desc }}</p>
        </div>
      </div>
      <div class="map">
        <div class="ht"><img src="static/img/icon/jianding/circle.png"> 机构地图</div>
        <div class="content">
          <div id="jd-map-container"></div>
        </div>
      </div>
      <div class="ry">
        <div class="ht"><img src="static/img/icon/jianding/circle.png"> 机构人员</div>
        <ul>
          <li v-for="(item, index) in employeelist" :key="'key-' + index">
            <a href="#" @click="getPersonnel(item)" class="btn btn-default">{{ item.name }}</a>
          </li>
        </ul>
      </div>
    </div>
    <Dialogs v-model="dialog" />
  </div>
</template>
<script>
import Menus from '../components/Menu'
import Dialogs from '../components/Dialog'
import TMap from '../functions/map'
import api from '../datas/api'

export default {
  name: 'JDPost',
  data() {
    return {
      dialog: {
        maskClose: true,
        show: false,
        title: '叶攀',
        cancelBtn: '返回',
        content:
          '编号：530101001028<br> 技术职称：实验师<br> 行业资格：执业教师<br> 执业类别：法医物证鉴定；法医临床鉴定。'
      },
      jdoffice: {},
      employeelist: []
    }
  },
  components: {
    Menus,
    Dialogs
  },
  methods: {
    getPersonnel(employee) {
      this.dialog.show = true
      this.dialog.title = employee.name
      this.dialog.content =
        '编号：' +
        employee.no +
        '技术职称：' +
        employee.title +
        '<br> 行业资格：' +
        employee.qualification +
        '<br> 执业类别：' +
        employee.industry_type
    },
    async getMap() {
      const dom = document.querySelector('#jd-map-container')
      if (dom.childNodes.length) {
        dom.childNodes[0].remove()
      }

      // 在此完成该函数
      const qq = await TMap('OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77')
      const map = new qq.maps.Map(dom, {
        center: new qq.maps.LatLng(this.jdoffice.geography.split(',')[0], this.jdoffice.geography.split(',')[1]),
        zoom: 17
      })
      // 地图点信息
      const infoWin = new qq.maps.InfoWindow({ map, zIndex: 10000 })
      const position = new qq.maps.LatLng(this.jdoffice.geography.split(',')[0], this.jdoffice.geography.split(',')[1])
      const anchor = new qq.maps.Point(24, 50)
      const size = new qq.maps.Size(100, 100)
      const origin = new qq.maps.Point(0, 0)
      const scaleSize = new qq.maps.Size(48, 48)
      const icon = new qq.maps.MarkerImage(
        'static/img/icon/position.png',
        size,
        origin,
        anchor,
        scaleSize
      )
      // 添加marker
      const marker = new qq.maps.Marker({
        position,
        map,
        animation: qq.maps.MarkerAnimation.DOWN
      })
      // const infotmp = this.setMapContent(masData[i])
      // 加载marker图标
      marker.setIcon(icon)

      infoWin.open()
      infoWin.setContent(`<div class="map-marker-info" style="padding:0 0 10px;">
          <h2 style="font-size:18px; margin:0 0 10px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">${this.jdoffice.name}</h2>
          <div style="color:#808080; font-size:16px;">
            <strong>地址：</strong>${this.jdoffice.address} <br>
            <strong>电话：</strong>${this.jdoffice.tell}
          </div>
        </div>`)
      infoWin.setPosition(map.getCenter())
    },
    async getEmployeelist() {
      let data = await this.$get(api.jiandingemployee + this.jdoffice.id)
      this.employeelist = data.items
    }
  },
  mounted() {
    this.jdoffice = this.$route.params.jdoffice
    this.getEmployeelist()
    this.getMap()
  }
}
</script>
<style lang="scss">
#jd-map-container {
  min-height: 360px;
  width: 100%;
  .map-marker-current {
    left: 50%;
    top: 460px;
    position: relative;
    width: 50px;
    height: 50px;
    margin: -25px 0 0 -25px;
    z-index: 10000;
  }
  .map-marker-info {
    // text-align: center;
    // white-space: nowrap;
    margin: 10px;
    h2 {
      font-size: 20px;
      color: #3d69bd;
    }
    div {
      font-size: 16px;
      p {
        margin: 0;
        strong {
          color: #f1543f;
          font-weight: normal;
        }
      }
    }
  }
}
.jianDingPost-page {
  padding: 200px 0 120px;
  .detail {
    background: #fff;
    width: 1280px;
    margin: 0 auto;
    padding: 50px;
    border-radius: 10px;
    font-size: 18px;
  }
  .ht {
    display: flex;
    align-items: center;
    font-size: 28px;
    padding: 40px 0 20px;
    img {
      margin-right: 10px;
    }
  }
  .name {
    font-size: 42px;
  }
  .contact {
    border-bottom: 1px dashed #ccc;
    padding: 20px 0;
  }
  .intro {
    p {
      margin-bottom: 15px;
    }
  }
  .ry {
    ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      li {
        width: 12.5%;
        a {
          display: block;
          margin: 0 15px 15px 0;
          font-size: 18px;
        }
      }
    }
  }
}
</style>
